var stats = new Stats(),
    sts = stats.domElement.style;
sts.position = 'absolute';
sts.top = '0px';
sts.right = '0px';
document.body.appendChild(stats.domElement);

var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    radius = 250,
    text = 'Hello World',
    len = text.length,
    stepDeg = Math.PI * 2 / len;

window.addEventListener('resize', handleWindowResize, false);
function handleWindowResize() {
    c.width = window.innerWidth * window.devicePixelRatio;
    c.height = window.innerHeight * window.devicePixelRatio;
}
handleWindowResize();

function drawText() {
    ctx.save();
    ctx.fillStyle = '#00bbff';
    for(var a = 0, i = 0; a < Math.PI * 2; a += stepDeg, i += 1) {
        ctx.save();
        var curPosition = {
            x: c.width / 2 + Math.cos(a) * radius,
            y: c.height / 2 - Math.sin(a) * radius
        };
        var rotateDeg = Math.PI / 2 - a; //旋转角度比较特殊
        // ctx.beginPath();
        // ctx.arc(c.width / 2 + Math.cos(a) * radius, c.height / 2 - Math.sin(a) * radius, 3, 0, Math.PI * 2, false);
        // ctx.closePath();
        // ctx.fill();
        ctx.setTransform(Math.cos(rotateDeg), Math.sin(rotateDeg), -Math.sin(rotateDeg), Math.cos(rotateDeg), curPosition.x, curPosition.y); //精髓一步，利用坐标旋转完成文字绘制
        // ctx.translate(curPosition.x, curPosition.y);
        // ctx.rotate(Math.PI / 2 - a);
        ctx.fillText(text.charAt(i), 0, 0);
        ctx.restore();
    }
    ctx.restore();
}

function drawCenter() {
    ctx.save();
    ctx.fillStyle = '#222';
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, 5, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

ctx.font = '64px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

(function animate() {

    drawCenter();
    drawText();
})();